<template>
	<!-- 邀请记录 -->
	<view class="bigbox">
		<!-- 头部盒子 -->
		<view class="box-t h260 mt34 flex row-around col-center">
			<!-- 左边的盒子 -->
			<view class="box-t-l flex1">
				<view class="box-t-l-num mb52">
					{{num}}
				</view>
				<view class="box-t-l-txt ">
					邀请好友
				</view>
			</view>
			<!-- /左边的盒子 -->
			<view class="line">
				
			</view>
			<!-- 右边的盒子 -->
			<view class="box-t-l flex1 ">
				<view class="box-t-l-num mb52">
					￥{{sum_invitation}}
				</view>
				<view class="box-t-l-txt ">
					邀请总收入
				</view>
			</view>
			<!-- /右边的盒子 -->
		</view>
		<!-- /头部盒子 -->
		
		<!-- banner盒子 -->
		<view class="bannerbox pl40 pt40 boxr mt44">
			<view class="bannerbox-info">
				邀请详情
			</view>
			<u-empty text="暂无记录" marginTop="100" v-if="!data.length"></u-empty>
			<!-- 列表盒子 -->
			<view class="bannerboxList flex row-between h146 pr40 pb30 mt30" v-for="(item,index) in data" :key="index" @tap="$jump(`/pages/home/invitation/CommissionDetails/CommissionDetails?id=${item.id}`)">
				<!-- 左边的盒子 -->
				<view class="boxList-l flex col-center">
					<image :src="$baseUrl+item.avatar" class="w94 h94 avatar mr26"></image>
				</view>
				<!-- 右边的盒子 -->
				<view class="boxList-r flex1 flex row-column row-between">
					<!-- 右边上面的盒子 -->
					<view class="boxList-r-t  flex row-between">
						<text class="boxList-r-id">{{item.username}}</text>
						<view class="boxList-r-m">
							<text>佣金：</text>
							<text class="boxListNum">￥{{item.commission}}</text>
						</view>
					</view>
					<!-- 右边下面的盒子 -->
					<view class="boxList-r-b flex row-between">
						<text class="boxList-s">{{item.is_induction?'已入职':'未入职'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<!-- /列表盒子 -->
		</view>
		<!-- /banner盒子 -->
	</view>
</template>

<script>
	export default {
		name:'invitationList',
		data() {
			return {
				page:1,
				data:[],
				//邀请人数
				num:uni.getStorageSync('userInfo').num,
				//佣金
				sum_invitation:uni.getStorageSync('userInfo').sum_invitation || 0,
			};
		},
		onLoad() {
			this.inviteList()
		},
		onReachBottom() {
			this.page++;
			this.inviteList()
		},
		methods:{
			inviteList(){
				let data = {
					page: 1,
					size: this.page * 10
				}
				this.$api.teamList(data).then(res => {
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
.box-t {
	position: relative;
	height: 260rpx;
	width: 100%;
	// background: url('/static/img/index/15邀请-背景4.png') no-repeat;
	// background-size: 100% 100%;
	background: linear-gradient(90deg, #1385FF, #4A74FE, #6C8DFE);
	border-radius: 14rpx;
	.box-t-l {
		text-align: center;
		.box-t-l-num {
			font-size: 66rpx;
			font-family: DIN;
			font-weight: bold;
			color: #FFFFFF;
		}
		.box-t-l-txt {
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
}
.line {
width: 2rpx;
height: 146rpx;
background: #FFFFFF;
opacity: 0.3;
border-radius: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
.bannerbox {
	.bannerbox-info {
		font-size: 30rpx;
		color: #0C162E;
	}
	.bannerboxList {
		border-bottom: 2rpx solid #D2DEEB;;
		.boxList-l {
			.avatar {
				border-radius: 50%;
			}
		}
		.boxList-r {
			.boxList-r-t {
				.boxList-r-id {
					font-size: 26rpx;
					color: #0C162E;
				}
				.boxList-r-m {
					text,
					.boxListNum{
						font-size: 24rpx;
						font-weight: 500;
						color: #6D788B;
					}
					.boxListNum {
						color: #FF2E6D;
					}
				}
			}
			.boxList-r-b {
				.boxList-s {
					font-size: 24rpx;
					font-weight: 500;
					color: #6D788B;
				}
			}
		}
	}
	.bannerboxList:last-child {
		border-bottom: none;
	}
}
</style>
